<template>
    <div class="min-h-screen bg-gray-100 relative">
        <!-- 博客入口 -->
        <a href="/login"
            class="absolute top-4 right-4 z-20 p-2 rounded-full bg-white hover:bg-gray-200 transition shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
            </svg>

        </a>

        <!-- 主内容区 -->
        <main class="relative z-10 min-h-screen flex flex-col items-center justify-center px-4 pb-28">
            <div class="w-full max-w-2xl space-y-6">
                <!-- 搜索区域 -->
                <div class="flex flex-col md:flex-row gap-2 md:gap-3 w-full">
                    <!-- 搜索引擎选择器 -->
                    <div class="relative md:w-40">
                        <select v-model="selectedEngine"
                            class="w-full rounded-lg bg-white py-3 pl-4 pr-8 text-gray-800 focus:outline-none border border-gray-300 hover:border-gray-400 transition-all appearance-none shadow-sm text-sm md:text-base">
                            <option v-for="engine in searchEngines" :value="engine">{{ engine.name }}</option>
                        </select>
                        <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
                            <svg class="w-4 h-4 md:w-5 md:h-5 text-gray-600" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 9l-7 7-7-7" />
                            </svg>
                        </div>
                    </div>

                    <!-- 搜索输入框 -->
                    <input v-model="searchQuery" type="text" @keyup.enter="handleSearch"
                        class="flex-1 rounded-lg bg-white py-3 px-4 text-gray-800 placeholder-gray-500 focus:outline-none border border-gray-300 hover:border-gray-400 transition-all shadow-sm"
                        placeholder="输入关键词搜索..." />
                </div>

                <!-- 语录 -->
                <div class="rounded-lg bg-white/80 p-4 text-center shadow-sm backdrop-blur-sm">
                    <p class="text-gray-700 italic font-medium">"{{ currentQuote }}"</p>
                </div>
            </div>
        </main>

        <!-- Docker栏 -->
        <footer class="fixed bottom-0 left-0 right-0 z-20">
            <div class="container mx-auto px-4 py-3">
                <div
                    class="rounded-xl bg-white/80 p-3 flex overflow-x-auto space-x-4 scrollbar-hide shadow-sm backdrop-blur-sm">
                    <a v-for="(item, index) in dockItems" :key="index" :href="item.url"
                        class="flex-shrink-0 flex flex-col items-center space-y-1 group">
                        <div
                            class="w-14 h-14 flex items-center justify-center rounded-lg bg-white group-hover:bg-gray-100 transition shadow">
                            <span class="text-2xl">{{ item.icon }}</span>
                        </div>
                        <span class="text-xs font-medium text-gray-700">{{ item.name }}</span>
                    </a>
                </div>
            </div>
        </footer>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const searchEngines = [
    { name: 'Google', url: 'https://www.google.com/search?q=' },
    { name: 'Bing', url: 'https://www.bing.com/search?q=' },
    { name: '百度', url: 'https://www.baidu.com/s?wd=' }
]

const quotes = [
    "保持好奇心是探索世界的钥匙",
    "成功是跌倒九次，站起来十次",
    "每天都是新的开始，永不言弃",
    "梦想不会发光，发光的是追梦的你",
    "最困难之时，就是离成功不远之日",
    "行动是治愈恐惧的良药"
]

const dockItems = ref([
    { icon: '🏠', name: '首页', url: '/main' },
    { icon: '📚︎', name: '文章', url: '/articles' },
    { icon: '💭', name: '动态', url: '/dynamic' },
    { icon: '🤖', name: 'AI', url: 'https://calendar.example.com' },
    { icon: '🎵', name: '音乐', url: 'https://music.example.com' },
    { icon: '🎵', name: '音乐', url: 'https://music.example.com' }
])

const selectedEngine = ref(searchEngines[0])
const searchQuery = ref('')
const currentQuote = ref(quotes[Math.floor(Math.random() * quotes.length)])

const handleSearch = () => {
    if (searchQuery.value.trim()) {
        window.open(`${selectedEngine.value.url}${encodeURIComponent(searchQuery.value)}`, '_blank')
    }
}
</script>

<style scoped>
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
</style>